<%@page import="entity.Visitor"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="/struts-tags" prefix="s"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Register new visitor</title>
<link href="css/java_tech_css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/messages_vi.js"></script>
</head>
<body>
	<div id="container">
        <div class="visitor-info">
				<h3>Visitor Information</h3>
		</div>	
			
		<div class="content">
			<div class="form">
				<form action="register" method="post" name="input-form" id="input-form" onsubmit="return checkAll();">
			<center>
				<table width="350">
					<tr height="50">
						<td width="350" colspan="2"><s:if test="hasActionErrors()">
								<div class="errors">
									<s:actionerror />
								</div>
							</s:if></td>
					</tr>
					<tr>
						<td colspan="2" align="center"
							style="font-weight: bold; color: green; margin-bottom: 50px; font-size: 20;">REGISTER</td>
					</tr>
					<tr></tr>
					<tr></tr>
					<tr>
						<td align="left">Username:</td>
						<td align="left"><s:textfield name="username" size="30" />
						</td>
					</tr>
					<tr>
						<td align="left">Password:</td>
						<td align="left"><s:password type="text" name="password"
								size="30" /></td>
					</tr>
					<tr>
						<td align="left">Re-password:</td>
						<td align="left"><s:password type="text" name="repassword"
								size="30" /></td>
					</tr>
					<tr>
						<td align="left">First name:</td>
						<td align="left"><s:textfield name="firstname" size="30" />
						</td>
					</tr>
					<tr>
						<td align="left">Last name:</td>
						<td align="left"><s:textfield name="lastname" size="30" />
						</td>
					</tr>
					<tr>
						<td align="left">Gender:</td>
						<td align="left"><select name="gender">
								<option value="male">Male</option>
								<option value="female">Female</option>
								<option value="other">Other</option>
						</select></td>
					</tr>
					<tr>
						<td align="left">You are in:</td>
						<td align="left">
							<ul>
								<li class="place-row1">
								     <input type="radio" name="area" value="Europe" />Europe
									<input type="radio" name="area" value="Africa" />Africa
								</li>
								<li class="place-row2">
								    <input type="radio" name="area" value="Australia"/>Australia
									<input type="radio" name="area" value="Asia"/>Asia 
									<input type="radio" name="area" value="America" />America
								</li>
							</ul>
						</td>
					</tr>
					<tr>
						<td align="left">Telephone:</td>
						<td align="left"><s:textfield name="telephone" size="30" />
						</td>
					</tr>
					<tr>
						<td align="left">Email:</td>
						<td align="left"><s:textfield name="email" size="30" />
						</td>
					</tr>
					<tr>
						<td align="left">Hobbies:</td>
						<td align="left">
							<div class="col2 hobby">
								<ul>
									<li><input type="checkbox" name="hobbies" value="swimming" />Swimming
										<input type="checkbox" name="hobbies" value="cooking" />Cooking
										<input type="checkbox" name="hobbies" value="shopping" />Shopping
									</li>
									<li><input type="checkbox" name="hobbies" value="sport" />Sport
										<input type="checkbox" name="hobbies" value="dance" />Dance 
										<input type="checkbox" name="hobbies" value="sing" />Sing
									</li>
								</ul>
							</div></td>
					</tr>
					<tr>
						<td align="left">Description:</td>
						<td align="left">
							<textarea name="description" rows="6" cols="30"></textarea>
						</td>
					</tr>

					<tr>
						<td align="left"></td>
						<td align="left">
							<input type="submit" name="submit" value="Submit" />
							<s:reset></s:reset>
<!-- 							<input type="reset" name="gvjk" value="reset" /> -->
						</td>
					</tr>
				</table>
			</center>
		</form>
			</div>
		</div>	
	</div>
	
	<script type="text/javascript">
        jQuery(document).ready(function() {
                jQuery("#ajaxButton").click(function() {
                        jQuery.ajax({
                                type : "POST",
                                url : "help.jsp",
                                success : function(html) {
                                        jQuery("#responseDiv").html(html);
                                }
                        });
                });
        });
    </script>
	<script type="text/javascript">
	$(document).ready(function(){
		$("#input-form").validate({
	        rules: {
	        	
	    		username: {
	    	  		required: true,
	    	  	},
	    	  	
	    		password: {
	    	  		required: true,
	    	  	},
	    	  	
				repassword: {
					equalTo: "#password" // So sánh tru?ng cpassword v?i tru?ng có id là password
				},
	        	//First name must be characters and not contain number
	    		firstname: {
	    	  		required: true,
	    	  		maxlength: 20
	    	  	},
	    	  	//Last name must be characters and not contain number
	    	  	lastname: {
	    	  		required: true,
	    	  		maxlength: 20
	    	  	},
	    	  	//Must be number
	    	  	telephone: {
	    	  		maxlength: 11,
	    	  		number: true
	    	  	},
	    	  	//Must be [a..Z][0..9]@[a..Z].
	    	  	email: {
	    	  		maxlength: 50,
	    	  		email: true
	    	  	},
	    	  	description: {
	                maxlength: 200
	    	  	},
	        }, 
	        messages: {
	        	username: {
	    	  		required: "User name must be a string",
	    	  	},
	    	  	password: {
	    	  		required: "Password isn't empty !",
	    	  	},    	  	
	        	firstname: {
	    	  		required: "First name must be a string",
	    	  	},
	    	  	lastname: {
	    	  		required: "Last name must be a string",
	    	  	},
	    	  	telephone: {
	    	  		required: "Please fill in this field",
	    	  	},
	    	  	email: {
	    	  		required: "Please fill in this field",
	    	  	},
	    	  	description:{
	    	  		required: "Please fill in this field",
	    	  	}
	        }
	    }); 
	})
	
	function checkAll() {
		var username = document.formRegister.username.value;
		var firstname = document.formRegister.firstname.value;
		var lastname = document.formRegister.lastname.value;
		var email = document.formRegister.email.value;
		var n;
		if (firstname == "") {
			alert(" invalid firstname");
			return false;
		}
		n = firstname.length;
		while ( n > 0) {
			if (firstname.charAt(n-1) > '0' && firstname.charAt(n-1) < '9') {
				alert(" firstname khong duoc chu ky tu so: " + firstname.charAt(n-1));
				return false;
			}
			n--;
		}
		
		n = lastname.length;
		while ( n > 0) {
			if (lastname.charAt(n-1) > '0' && lastname.charAt(n-1) < '9') {
				alert(" lastname khong duoc chu ky tu so: " + lastname.charAt(n-1));
				return false;
			}
			n--;
		}
		if ($('input[name=area]:checked').length <= 0) {
		    alert(" You must to select a area");
		    return false;
		}
		
		var rs = new RegExp("^[_A-Za-z0-9-\\+]+(\\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\\.[A-Za-z0-9]+)*(\\.[A-Za-z]{2,})$");
		if(!email.match(rs)) {
			alert(" invalid email");
			return false;
		}
	}
	
	</script>
</body>


</html>